<template>
	<view class="merchant-phone" catchtouchmove="ture">
		<view class="phone-mask" @tap.stop="closerMerchantPhoneFun" :animation="animationBg"></view>
		<view class="phone-content" :animation="animationData">
			<view>{{phoneTitle}}</view>
			<view class="phone-number" @tap.stop="callMerchant" :data-phone="phone">{{phone}}</view>
			<view class="btn-mark" @tap.stop="closerMerchantPhoneFun">取消</view>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				animationData: {},
				animationBg: {}
			};
		},

		components: {},
		props: {
			phone: {
				type: String,
				default: ''
			},
			phoneTitle: {
				type: String,
				default:''
			}
		},
		mounted: function () {
			var animation = wx.createAnimation({
				duration: 250,
				delay: 100,
				timingFunction: 'ease-in-out'
			});
			this.animation = animation;
			this.animation.bottom(0).step();

			this.animationData = this.animation.export()

			var animationBg = wx.createAnimation({
				duration: 250,
				delay: 100,
				timingFunction: 'ease-in-out'
			});
			this.animatBg = animationBg;
			this.animatBg.opacity(0.3).step();
			this.animationBg = this.animatBg.export();
		},
		methods: {
			// 打电话
			callMerchant: function (e) {
				let phone = e.currentTarget.dataset.phone;
				wx.makePhoneCall({
					phoneNumber: phone
				});
			},
			// 取消按钮回调
			closerMerchantPhoneFun: function () {
				this.animation.bottom('-500rpx').step();
				this.animationData = this.animation.export();
				this.animatBg.opacity(0).step();
				this.animationBg = this.animatBg.export();

				const _this = this;

				setTimeout(function () {
					_this.$emit("closerMerchantPhone");
				}, 400);
			}
		}
	};
</script>
<style>
	@import "./index.css";
</style>